<template>
  <div class="case-time">
    <div class="chart" id="caseTimeBar"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getMonth, getRandomData } from '@/utils/utils'
export default {
  name: 'CaseTime',
  methods:{
    initChart(){
      const chart=echarts.init(document.getElementById('caseTimeBar'))
      const option={
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          right:'center',
          top:-5,
          textStyle:{
            color:'#fff'
          }
        },
        xAxis:{
          type:'category',
          data:getMonth(),
          axisLabel:{
            color:'#fff'
          },
          axisTick:{
            show:false
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)'
            }
          }
        },
        grid:{
          left:0,
          top:30,
          right:20,
          bottom:10,
          containLabel:true
        },
        yAxis:{
          type:'value',
          axisLabel:{
            color:'#fff'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)'
            }
          }
        },
        series:[
          {
            name:'刑事案件',
            type:'bar',
            data:getRandomData(35,8,12),
            barWidth:15,
            showBackground:true,
            backgroundStyle:{
              color:'rgba(49,167,255,0.2)',
              borderRadius:10
            },
            itemStyle:{
              color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#01D2F5',
                },
                {
                  offset: 1,
                  color: '#2393FF',
                }
              ]),
              borderRadius:10
            },
            barGap:0.8,
          },
          {
            name:'治安案件',
            type:'bar',
            data:getRandomData(35,8,12),
            barWidth:15,
            showBackground:true,
            backgroundStyle:{
              color:'rgba(49,167,255,0.2)',
              borderRadius:10
            },
            itemStyle:{
              color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FED52F',
                },
                {
                  offset: 1,
                  color: '#E99B22',
                }
              ]),
              borderRadius:10
            }
          }
        ]
      }
      chart.setOption(option)
    }
  },
  mounted() {
    this.initChart();
  }
}
</script>
<style scoped lang="scss">
.case-time{
  width: 100%;
  height: 100%;
  .chart{
    width: 100%;
    height: 100%;
  }
}
</style>
